<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<view class="u-skeleton">
			<!-- 标题 -->
			<view class="title u-skeleton-fillet">{{ data.title }}</view>

			<view class="time-view-count">
				<!-- 发布时间 或 最新修改时间  和 阅读数-->
				<view class="time u-skeleton-fillet" >
					<text v-if="data.update_time">与 {{ $fn.timeFormat(data.update_time) }} 修改</text>
					<text v-else>{{ $fn.timeFormat(data._add_time) }}</text>
				</view>
				<!-- 阅读数 -->
				<view class="view-count"><text class="u-skeleton-fillet text">阅读 {{ $fn.numStr(data.view_count) }}</text></view>
			</view>

			<!-- 内容 -->
			<view class="content u-skeleton-fillet">
				<u-parse :html="data.content"></u-parse>
			</view>

			<view class="detail-btn" @click="detailBtn" v-if="data.url"><text class="u-skeleton-fillet text">{{ data.url_text || '查看详情' }}</text></view>
			<!-- 精选留言 暂不考虑 -->
		</view>

		<!--骨架屏组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#fff"></u-skeleton>
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	var vk = uni.vk;			// vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				data:{
					_id: "",
					content: "",
					sort: "",
					status: "",
					title: "",
					update_time: "",
					url: "",
					user_id: "",
					_add_time: "",
					view_count: ""
				},
				// 表单请求数据
				form1:{

				},
				scrollTop:0,
				loading: true
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 监听 - 点击右上角转发时 https://uniapp.dcloud.io/api/plugins/share.html#onshareappmessage
		onShareAppMessage(options) {

		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options){
				let that = this;
				that.loading = true;
				const eventChannel = that.getOpenerEventChannel(); // that 需指向 this
				// 监听data事件，获取上一页面通过eventChannel.emit传送到当前页面的数据
				if (eventChannel.on) {
					eventChannel.on('data', (data) => {
						data.view_count++;
						that.data = data;
						that.loading = false;
					});
				}
				vk.callFunction({
					url: 'client/pub.getNoticeInfo',
					data:{
						_id: options._id,
						is_view: true
					},
					success:(data)=>{
						that.data = data.info;
					},
					complete:()=>{
						that.loading = false;
					}
				});
			},
			detailBtn(){
				let that = this;
				let { url } = this.data;
				if (url) {
					if (url.indexOf("/") !== 0) {
						url = "/" + url;
					}
					vk.navigateTo(url);
				}
			}
		},
		// 监听器
		watch:{

		},
		// 计算属性
		computed:{

		}
	}
</script>
<style lang="scss" scoped>
	.app{
		padding: 30rpx;
		.title{
			font-weight: bold;
			font-size: 34rpx;
			margin-bottom: 20rpx;
			letter-spacing: 2rpx;
			min-height: 44rpx;
		}
		.time-view-count{
			display: flex;
			align-items: center;
			color: #9a9a9a;
			font-size: 28rpx;
			.time{
				min-height: 40rpx;
				flex: 1;
			}
			.view-count{
				min-height: 40rpx;
				margin-left: 20rpx;
			}
		}

		.content{
			margin-top: 80rpx;
			letter-spacing: 2rpx;
			min-height: 400rpx;
		}

		.detail-btn{
			min-height: 40rpx;
			margin-top: 40rpx;
			color: var(--main);
			text-decoration: underline;
		}
		.text.u-skeleton-fillet{
			min-width: 150rpx;
			display: inline-block;
		}
	}
</style>
